// 获取当前数据的id - 地址栏中的数据
//id中的值赋值给search 
var search = location.search;
//是一个数组
var arr = /id=(\d+)/.exec(search);
//输出商品id
console.log(arr);

//判断是从首页列表跳转过来的还是网址直接输入的，不是跳转过来的不给访问
if(!arr){
    layer.msg('非法请求',{
        icon: 2,
        time: 1500
    },function(){
        location.href = 'index.html'
    })
}

var id = arr[1];
//输出商品id值
console.log(id);

//发送ajax请求 - 商品数据
$.get('./php/detail.php',{id},res => {
    //输出ajax请求的返回值，也就是当前的商品信息
    console.log(res);
    //解构
    var {meta: {status,msg}, data} = res;
    if(status === 1){
        //status等于1说明数据获取成功，可以加载页面
        //data为返回的商品数据，对象形式
        //商品名称
        $('.goodsname span').text(data.name);
        //商品价格
        $('.goodsprice span').text('￥' + data.price);
        //商品介绍
        $('.goodsintroduce span').text(data.introduce);


        //动态渲染放大镜小图,用split把拥有3个图片地址的imgpath炸开,函数返回形式是一个数组。
        var smallimgarr = data.imgpath.split('=====');
        // console.log(smallimgarr);
        var img = '';
        //循环提取smallimgarr中的3个图片地址放在Img中
        smallimgarr.forEach((item,index)=>{
            if(index === 0){
                //如果商品一打开没有被点击图片，默认是第一张图
                img += `
                    <img class="active" src="${item}">
                `
                $('.box>img').attr('src',item)
                $('.big>img').attr('src',item)
            }else{
                img += `
                    <img src="${item}">
                `
            }
        })
        //把img写到小图里面
        $('.small').html(img);
        //把大图也改了
        $('.box>img').attr('src',smallimgarr[0]);
        $('.big>img').attr('src',smallimgarr[0]);
        //放大镜文件先引入，detail文件后引入。会覆盖掉enlarge导致放大镜文件失效，则放大镜功能封装成函数，在detail弄好之后再调用放大镜js功能
        //启动放大镜
        enlarge();
        //加入购物车
        addcart();
    }
},'json')



// 加入购物车
// 存数据
// 数据库
// 数据库比较复杂
// 本地存储 - 模拟购物车数据

// goodsid number userid
// [{goodsid number username},{goodsid number username}]
// 点击加入购物车的按钮

/*
1.判断用户是否登陆，没有登陆就强制跳转到登陆页面
2.有登陆
3.获取本地存储中的数据
    如果有数据 - 判断，是否当前这条数据
        如果是当前的数据
            将这个数据中的number+1，然后重新存到本地存储中
        如果没有当前这条数据
            在这个数组中追加一条就好了
    如果没有数据 - 自己创建数据和数组，放到本地存储中
*/
function addcart(){
    //按钮添加点击事件
    $('.addcart').click(function(){
        //上一个js引入文件的全局变量，在下一个文件中也能用
        /*
        <script src="./node_modules/jquery/dist/jquery.js"></script>
        <script src="./js/tools-danli.js"></script>
        <script src="./js/username.js"></script>
        <script src="./js/enlarge.js"></script>
        <script src="./node_modules/layui-layer/dist/layer.js"></script>
        <script src="./js/detail.js"></script>
        */

        //再获取一下username
        var username = tool.getCookie('username');
        //判断用户是否登录
        if(!username){
            layer.msg("请先登录",{
                icon:2,
                time:1500
            },function(){
                // 获取到当前页面的url - 存在本地存储
                localStorage.setItem('url',location.href);
                location.href = "login.html";
            })
            return false;
        }


        /*
        加入购物车功能
        */
        // 先获取本地存储，是否有数据，有就追加，没有就新增
        var data = localStorage.getItem('data');
        if(data){
            var arr = JSON.parse(data);
            //如果有数据，筛选一下是否有当前这条数据
            var obj = arr.find(item=>item.username === username && item.goodsid === id);
            //如果有，就在当前这条数据+1，否则，添加新数据
            if(obj){
                obj.number += 1;
            }else{
                var obj = {
                    goodsid: id,
                    username,
                    number: 1
                }
                arr.push(obj);
            }
        }else{
            var arr = [{
                    goodsid: id,
                    username,
                    number: 1
            }];
        }
        // 存储arr
        localStorage.setItem('data',JSON.stringify(arr));
    })
}







